<template>
	<view class="list list-pd">
		<view class="list-cell cell-pd">
			<view class="uni-uploader">
				<view class="uni-uploader-body">
					<view class="uni-uploader__files">
						<block v-for="(image, index) in imageList" :key="index">
							<view class="uni-uploader__file">
								<view class="icon iconfont icon-cuo" @tap="deleteTap(index)"></view>
								<image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
							</view>
						</block>
						<view v-if="imageList.length !== total" class="uni-uploader-select-box icon iconfont icon-jiahao">
							<view class="uni-uploader__input" @tap="chooseImage"></view>
							<view class="uni-uploader-info">{{ imageList.length }}/{{ total }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const sourceType = [['camera'], ['album'], ['camera', 'album']];
const sizeType = [['compressed'], ['original'], ['compressed', 'original']];
import { mapMutations } from 'vuex';
export default {
	props: {
		total: Number,
		sourceTypeIndex: Number,
		sizeTypeIndex: Number,
		sourceImgs: {
			type: Array,
			default: ()=>[]
		}
	},
	data() {
		return {
			imageList: [],
			sourceType: ['拍照', '相册', '拍照或相册'],
			sizeType: ['压缩', '原图', '压缩或原图'],
			count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
		};
	},
	methods: {
		// 上传图片
		chooseImage: async function() {
			if (this.imageList.length === this.total) {
				return;
			}
			uni.chooseImage({
				sourceType: sourceType[this.sourceTypeIndex],
				sizeType: sizeType[this.sizeTypeIndex],
				count: this.imageList.length + this.count[this.total - 1] > this.total ? this.total - this.imageList.length : this.count[this.total - 1],
				success: res => {
					this.imageList = this.imageList.concat(res.tempFilePaths);
					this.$emit('changeImg', this.imageList);
				}
			});
		},
		// 预览图片
		previewImage: function(e) {
			var current = e.target.dataset.src;
			uni.previewImage({
				current: current,
				urls: this.imageList
			});
		},
		// 删除图片
		deleteTap(index) {
			this.imageList.splice(index, 1);
			this.$emit('changeImg', this.imageList);
		}
	},
	mounted() {
		if (this.sourceImgs.length > 0) {
			this.imageList = this.sourceImgs;
		}
	}
};
</script>

<style lang="less" scoped>
.list-pd {
	background-color: #ffffff;
	padding-left: 40rpx;
}
.uni-uploader__file {
	position: relative;
	.icon-cuo {
		position: absolute;
		top: 0;
		right: 0;
		color: #ee5e5e;
		z-index: 9;
	}
	.icon-cuo:before {
		padding: 0 5upx;
	}

	.uni-uploader__img {
		border-radius: 10rpx;
	}
}
.uni-uploader-select-box {
	position: relative;
	background-color: #f0f0f0;
	border: none;
	border-radius: 10rpx;
	color: #d8d8d8;
	margin: 10rpx 10rpx 25rpx;
	width: 208rpx;
	height: 208rpx;

	.uni-uploader-info {
		position: absolute;
		bottom: 10rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.icon-jiahao {
	position: relative;
}
.icon-jiahao:before {
	position: absolute;
	top: 50%;
	left: 50%;
	font-size: 110rpx;
	transform: translate(-50%, -50%);
	color: #d8d8d8;
}
.uni-list {
	border: none !important;
}
</style>
